<template>
  <view class="interview-home">
    <!-- 候选人信息卡片 -->
    <view class="info-card">
      <view class="card-title">候选人信息</view>
      <view class="info-item">
        <text class="label">姓名：</text>
        <text class="value">{{ candidateInfo.name }}</text>
      </view>
      <view class="info-item">
        <text class="label">应聘职位：</text>
        <text class="value">{{ candidateInfo.position }}</text>
      </view>
      <view class="info-item">
        <text class="label">联系电话：</text>
        <text class="value">{{ candidateInfo.phone }}</text>
      </view>
      <view class="info-item">
        <text class="label">邮箱：</text>
        <text class="value">{{ candidateInfo.email }}</text>
      </view>
    </view>

    <!-- 面试安排卡片 -->
    <view class="info-card" v-if="interviewSchedule">
      <view class="card-title">面试安排</view>
      <view class="info-item">
        <text class="label">面试状态：</text>
        <text class="value" :class="getStatusClass(candidateInfo.interviewStatus)">
          {{ getStatusText(candidateInfo.interviewStatus) }}
        </text>
      </view>
      <view class="info-item">
        <text class="label">面试结果：</text>
        <text class="value" :class="getResultClass(candidateInfo.interviewResult)">
          {{ getResultText(candidateInfo.interviewResult) }}
        </text>
      </view>
      <view class="info-item">
        <text class="label">面试时间：</text>
        <text class="value">{{ formatDateTime(interviewSchedule.interviewTime) }}</text>
      </view>
      <view class="info-item">
        <text class="label">面试时长：</text>
        <text class="value">{{ interviewSchedule.duration }}分钟</text>
      </view>
    </view>

    <!-- 面试官信息卡片 -->
    <view class="info-card" v-if="interviewer">
      <view class="card-title">面试官信息</view>
      <view class="interviewer-info">
        <image class="interviewer-avatar" :src="interviewer.avatar" mode="aspectFill"></image>
        <view class="interviewer-details">
          <view class="interviewer-name">{{ interviewer.name }}</view>
          <view class="interviewer-desc">{{ interviewer.description }}</view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-area">
      <button class="action-btn" 
              :disabled="!canStartInterview"
              @click="startInterview">
        开始面试
      </button>
    </view>
  </view>
</template>

<script>
import request from '../../utils/request'

export default {
  data() {
    return {
      candidateInfo: {},
      interviewSchedule: null,
      interviewer: null,
      questions: []
    }
  },
  computed: {
    canStartInterview() {
      if (!this.interviewSchedule) return false;
      // 只有在面试未开始状态(status=1)才能开始面试
      return this.candidateInfo.interviewStatus === 1;
    }
  },
  onLoad() {
    this.loadCandidateInfo();
    this.loadInterviewSchedule();
    this.loadInterviewDetails();
  },
  methods: {
    // 加载候选人信息
    loadCandidateInfo() {
      const candidateInfo = uni.getStorageSync('candidateInfo');
      if (candidateInfo) {
        this.candidateInfo = candidateInfo;
      }
    },
    // 加载面试安排
    async loadInterviewSchedule() {
      try {
        console.log('开始获取面试安排，候选人ID:', this.candidateInfo.id);
        const res = await request.get(`/api/candidate/schedule/${this.candidateInfo.id}`);
        console.log('获取面试安排响应:', res);
        if (res.code === 200) {
          this.interviewSchedule = res.data;
        } else {
          uni.showToast({
            title: res.msg || '获取面试安排失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('获取面试安排失败:', error);
        uni.showToast({
          title: '获取面试安排失败，请稍后重试',
          icon: 'none'
        });
      }
    },
    // 加载面试详情
    async loadInterviewDetails() {
      try {
        console.log('开始获取面试详情，候选人ID:', this.candidateInfo.id);
        const res = await request.get(`/api/candidate/interview/${this.candidateInfo.id}`);
        console.log('获取面试详情响应:', res);
        
        if (res.code === 200) {
          const details = res.data;
          if (details.schedule) {
            this.interviewSchedule = details.schedule;
          }
          if (details.questions && details.questions.length > 0) {
            this.questions = details.questions;
          }
          if (details.interviewer) {
            this.interviewer = details.interviewer;
          }
        } else {
          uni.showToast({
            title: res.msg || '获取面试详情失败',
            icon: 'none',
            duration: 2000
          });
        }
      } catch (error) {
        console.error('获取面试详情失败:', error);
        uni.showToast({
          title: error.message || '获取面试详情失败，请稍后重试',
          icon: 'none',
          duration: 2000
        });
      }
    },
    // 开始面试
    async startInterview() {
      try {
        console.log('开始面试，候选人ID:', this.candidateInfo.id);
        const res = await request.post(`/api/candidate/interview/start/${this.candidateInfo.id}`);
        console.log('开始面试响应:', res);
        
        if (res.code === 200) {
          // 重新加载面试安排和详情
          await this.loadInterviewSchedule();
          await this.loadInterviewDetails();
          
          // 跳转到面试前验证页面
          uni.navigateTo({
            url: '/pages/preCheck/preCheck'
          });
        } else {
          uni.showToast({
            title: res.msg || '开始面试失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('开始面试失败:', error);
        uni.showToast({
          title: '开始面试失败，请稍后重试',
          icon: 'none'
        });
      }
    },
    // 格式化日期时间
    formatDateTime(dateTimeStr) {
      if (!dateTimeStr) return '';
      const date = new Date(dateTimeStr);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
    },
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        1: '未开始',
        2: '面试中',
        3: '已完成',
        4: '已结束'
      };
      return statusMap[status] || '未知状态';
    },
    // 获取状态样式类
    getStatusClass(status) {
      const classMap = {
        1: 'status-pending',
        2: 'status-ongoing',
        3: 'status-completed',
        4: 'status-ended'
      };
      return classMap[status] || '';
    },
    // 获取结果文本
    getResultText(result) {
      const resultMap = {
        0: '未通过',
        1: '待定',
        2: '通过'
      };
      return resultMap[result] || '未知结果';
    },
    // 获取结果样式类
    getResultClass(result) {
      const classMap = {
        0: 'result-failed',
        1: 'result-pending',
        2: 'result-passed'
      };
      return classMap[result] || '';
    },
    // 获取难度文本
    getDifficultyText(difficulty) {
      const difficultyMap = {
        1: '简单',
        2: '中等',
        3: '困难'
      };
      return difficultyMap[difficulty] || '未知难度';
    },
    // 获取难度样式类
    getDifficultyClass(difficulty) {
      const classMap = {
        1: 'difficulty-easy',
        2: 'difficulty-medium',
        3: 'difficulty-hard'
      };
      return classMap[difficulty] || '';
    }
  }
}
</script>

<style>
.interview-home {
  padding: 20rpx;
}

.info-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #eee;
}

.info-item {
  display: flex;
  margin-bottom: 16rpx;
}

.label {
  color: #666;
  width: 160rpx;
  flex-shrink: 0;
}

.value {
  color: #333;
  flex: 1;
}

/* 面试官信息样式 */
.interviewer-info {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
}

.interviewer-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-right: 20rpx;
}

.interviewer-details {
  flex: 1;
}

.interviewer-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.interviewer-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

/* 状态和结果样式 */
.status-pending {
  color: #909399;
}

.status-ongoing {
  color: #409EFF;
}

.status-completed {
  color: #67C23A;
}

.result-failed {
  color: #F56C6C;
}

.result-pending {
  color: #E6A23C;
}

.result-passed {
  color: #67C23A;
}

.action-area {
  margin-top: 40rpx;
  padding: 0 30rpx;
}

.action-btn {
  background: #07c160;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 32rpx;
  padding: 20rpx 0;
}

.action-btn[disabled] {
  background: #ccc;
  color: #fff;
}
</style> 